<template>
    <div>
        <!-- 表单 -->
        <el-form :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="100px">
            <el-form-item label="客户代码" prop="customerCode">
                <el-input
                    v-model="queryParams.customerCode"
                    placeholder="请输入客户代码"
                    clearable
                    style="width: 240px"
                />
            </el-form-item>

            <el-form-item label="设备类型" prop="devType">
                <!-- 下拉框  -->
                <el-select v-model="queryParams.devType" placeholder="请选择设备类型">
                    <el-option 
                        v-for="item in devTypeDict"
                        :key="item.devType"
                        :label="item.devTypeName"
                        :value="item.devType"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="生产批次号" prop="productionBatches">
                <el-input
                    v-model="queryParams.productionBatches"
                    placeholder="请输入生产批次号"
                    clearable
                    style="width: 240px"
                />
            </el-form-item>

            <el-form-item label="设备MAC地址" prop="devMac">
                <el-input
                    v-model="queryParams.devMac"
                    placeholder="请输入设备MAC地址"
                    clearable
                    style="width: 240px"
                />
            </el-form-item>
            <el-row>
                <el-col :offset="1">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="submitQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetForm">重置</el-button>
                        <el-button size="mini" type="success" @click="handleImport">导入</el-button>
                        <el-button size="mini" type="success" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-col>  
            </el-row>
            
        </el-form>

        <!-- 表格 -->
        <el-table v-loading="loading" :data="outboundList">
            <el-table-column
                label="设备MAC地址"
                align="center"
                key="devMac"
                prop="devMac"
            />
            <el-table-column
                label="ICCID"
                align="center"
                key="iccid"
                prop="iccid"
            />
            <el-table-column
                label="设备类型"
                align="center"
                key="devType"
                prop="devType"
            >
                <template slot-scope="scope"> 
                    {{getLabel(devTypeDict,scope.row.devType,'devType','devTypeName') }}
                </template>
            </el-table-column>
            <el-table-column
                label="厂商代码"
                align="center"
                key="vendorCode"
                prop="vendorCode"
            />
            <el-table-column
                label="客户代码"
                align="center"
                key="customerCode"
                prop="customerCode"
            />
            <el-table-column
                label="生产批次号"
                align="center"
                key="productionBatches"
                prop="productionBatches"
            />
            <el-table-column
                label="加密密钥"
                align="center"
                key="secretKey"
                prop="secretKey"
            />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- ADD&EDIT表单 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="optionForm" :model="formParam" :rules="rules" label-width='120px'>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设备MAC地址" prop="devMac">
                            <el-input v-model="formParam.devMac" placeholder="请输入设备MAC地址" maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="ICCID" prop="iccid">
                            <el-input v-model="formParam.iccid" placeholder="请输入iccid" maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="加密密钥" porp="secretKey" :rules="{ required: true, message: '加密密钥不能为空', trigger: 'blur' }">
                            <el-input v-model="formParam.secretKey" placeholder="请输入加密密钥" maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="生产批次号" porp="productionBatches" :rules="{ required: true, message: '生产批次号不能为空', trigger: 'blur' }">
                            <el-input v-model="formParam.productionBatches" placeholder="请输入生产批次号" maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="厂商代码" porp="vendorCode" :rules="{ required: true, message: '厂商代码不能为空', trigger: 'blur' }">
                            <el-input v-model="formParam.vendorCode" placeholder="请输入厂商代码" maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户代码" porp="customerCode" :rules="{ required: true, message: '客户代码不能为空', trigger: 'blur' }">
                            <el-input v-model="formParam.customerCode" placeholder="请输入客户代码" maxlength="30"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="设备类型" prop="devType">
                            <el-select v-model="formParam.devType" placeholder="请选择设备类型">
                                <el-option 
                                    v-for="item in devTypeDict"
                                    :key="item.devType"
                                    :label="item.devTypeName"
                                    :value="item.devType"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm()">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 设备出库信息导入 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
                ref="upload"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                <span>仅允许导入xls、xlsx格式文件。</span>
                <el-link
                    type="primary"
                    :underline="false"
                    style="font-size: 12px; vertical-align: baseline"
                    @click="importTemplate"
                    >下载模板</el-link>
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getPage, excelImport, getImportTemplate, 
            add, edit, del, getDevTypeSelection} from '@/api/alm/dev-inventory-info/dev-outbound-info'
import { getToken } from "@/utils/auth";

export default {
    data() {
        return {
            devTypeDict: null,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                customerCode: undefined,
                productionBatches: undefined,
                devType: undefined,
                devMac: undefined,
                secretKey: undefined
            },
            loading: false,
            // 表格数据
            outboundList: null,
            total: 0,
            totalPage: 0,
            // 导入参数
            upload: {
                // 是否显示弹出层（导入）
                open: false,
                // 弹出层标题（导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                updateSupport: 1,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/alm/dev_customer_map/excel_import",
            },
            title: null,
            open: false,
            // 表单数据
            formParam: {},
            // 表单校验
            rules: {
                devMac: [{ required: true, message: "设备MAC地址不能为空", trigger: "blur" }],
                devType: [{ required: true, message: "请选择设备类型", trigger: "change" }],
            }
        }
    },
    created() {
        this.getDevTypeDict();
        this.getList();
    },
    methods: {
        getLabel(list, id, value, label) {
            if (id != '' && Array.isArray(list) && list.length != 0){
                return !list.find(item => item[value] == id) ? id : list.find(item => item[value] == id)[label]
            } else {
                return id
            }   
        },
        getDevTypeDict(){
            getDevTypeSelection().then(res => {
                console.log(res)
                this.devTypeDict = res.data;
            })
        },
        // 获取列表
        getList(){
            this.loading = true;
            getPage(this.queryParams).then(res  => {
                console.log("res ", res);
                this.total = res.data.total;
                this.totalPage = res.data.totalPage;
                this.outboundList = res.data.records
                this.loading = false;
            })
        },
        // 搜索
        submitQuery() {
            this.getList();
        },
        // 重置
        resetForm() {
            this.$refs["queryForm"].resetFields();
            this.queryParams = {
                pageNum: 1,
                pageSize: 10
            };
            this.getList();
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download(
            "/alm/dev_customer_map/import_template",
            {},
            `设备出库信息导入模板.xlsx`
            )
        },
        
        handleDel(id) {
            del(id).then(res => {
                this.queryParams = {
                    pageNum: 1,
                    pageSize: 10
                };
                this.getList();
                this.$modal.msgSuccess("删除成功");
            })
        },
        // 表单重置
        reset(){
            this.formParam = {
                id: undefined,
                devMac: undefined,
                iccid: undefined,
                devType: undefined,
                productionBatches: undefined,
                vendorCode: undefined,
                customerCode: undefined,
                secretKey: undefined
            };
        },
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加设备出库信息";
        },
        handleEdit(row) {
            this.formParam = {
                id: row.id,
                devMac: row.devMac,
                iccid: row.iccid,
                devType: parseInt(row.devType),
                productionBatches: row.productionBatches,
                vendorCode: row.vendorCode,
                customerCode: row.customerCode,
                secretKey: row.secretKey
            }
            this.open = true;
            this.title = "修改设备出库信息";
        },
        // 表单提交
        submitForm() {
            this.$refs.optionForm.validate((valid) => {
                if(valid) {
                    if(this.formParam.id != undefined) {
                        // 修改
                        edit(this.formParam).then(res => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        })
                    }else {
                        // 新增
                        add(this.formParam).then(res => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        })
                    }
                }
            })
        },
        // 表单取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
         /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "设备出库信息导入";
            this.upload.open = true;
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(
                "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
                response.msg +
                "</div>",
                "导入结果",
                { dangerouslyUseHTMLString: true }
            );
            this.getList();
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
    },
    
}
</script>